<template>
	<view class="flex-between">
		<view class="flex" style="width: 100%">
			<!-- 楼主头像 -->
			<view class="u-avatar-76 clear-flex"
				@click="jumpUrl(`/pages/user/personal/index/index?userId=${ item.userId }`)">
				<x-image :src="showImage(item.userHeadImgUrl, 'logo')"></x-image>
			</view>

			<!-- 楼主名称和回复 -->
			<view class="u-m-l-14" style="width: 100%">
				<view class="flex-between flex-baseline">
					<view>
						<view class="flex-center">
							<view class="u-f-28 u-lh-40 color-grew-light">{{ item.userNick || '' }}</view>
							<view v-if="item.userId === userId" class="u-f-22 u-lh-32 u-text-center author-tag u-m-l-6">
								{{ lang_common.author }}
							</view>
						</view>

						<view class="u-f-28 u-lh-40 u-m-t-8">{{ item.content || '' }}</view>
					</view>

					<view style="width: 80rpx;" class="u-text-center" @click="likeAction(item)">
						<u-icon name="liked-active" custom-prefix="u"
							:color="item.likeActionId ? likedColor : defaultColor" size="38"></u-icon>
						<view class="u-f-26 u-lh-36 u-m-t-2 nowrap" style="color: #707071">
							{{ formatNumber(item.likeCount || 0) }}
						</view>
					</view>
				</view>

				<view class="flex-center u-m-t-12">
					<view class="u-f-26 u-lh-36 u-m-r-24" style="color: #b1b1b1">{{ formatDate(item) }}</view>
					<view class="u-f-28 u-lh-40 color-grew-light" @click="replyAction(item)">{{ lang_common.reply }}
					</view>
				</view>

				<!-- 回复列表 -->
				<view v-if="list.length">
					<view class="flex u-p-t-24" style="width: 100%" v-for="(comment, cindex) in showList" :key="cindex">
						<!-- 回复头像 -->
						<view class="u-avatar-44 clear-flex"
							@click="jumpUrl(`/pages/user/personal/index/index?userId=${ comment.userId }`)">
							<x-image :src="showImage(comment.userHeadImgUrl)"></x-image>
						</view>

						<view class="u-m-l-14" style="width: 100%">
							<view class="flex-between flex-baseline">
								<view>
									<view class="flex-center linecamp-1" style="max-width: 400rpx;">
										<view class="u-f-28 u-lh-40 color-grew-light linecamp-1"
											style="max-width: 180rpx;">{{ comment.userNick || '' }}</view>
										<view v-if="comment.userId === userId"
											class="u-f-22 u-lh-32 u-text-center author-tag u-m-l-6">
											{{ lang_common.author }}
										</view>
										<view class="u-f-28 u-lh-40 color-grew-light u-p-l-10 u-p-r-10 nowrap">
											<u-icon name="right" custom-prefix="u" size="20" color="#999"></u-icon>
										</view>
										<view class="linecamp-1" style="max-width: 180rpx;">
											{{ comment.toUserNick || '' }}
										</view>
									</view>

									<view class="u-f-28 u-lh-40 u-m-t-8">{{ comment.content || '' }}</view>
								</view>

								<view style="width: 80rpx;" class="u-text-center" @click="likeAction(comment)">
									<u-icon name="liked-active" custom-prefix="u"
										:color="comment.likeActionId ? likedColor : defaultColor" size="38">
									</u-icon>
									<view class="u-f-26 u-lh-36 u-m-t-2 nowrap" style="color: #707071">
										{{ formatNumber(comment.likeCount || 0) }}
									</view>
								</view>
							</view>

							<view class="flex-center u-m-t-12">
								<view class="u-f-26 u-lh-36 u-m-r-24" style="color: #b1b1b1">{{ formatDate(comment) }}
								</view>
								<view class="u-f-28 u-lh-40 color-grew-light" @click="replyAction(comment)">
									{{ lang_common.reply }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 展开/收起 -->
				<view v-if="total > 3" class="u-f-26 u-lh-36 color-grew-light u-m-t-22 flex" style="width: max-content"
					@click="expandAction">
					<view class="u-m-r-16">——
						{{ (total - showList.length) ? `${lang_common.expand + (total - showList.length) + lang_common.reply}` : lang_common.collapse }}
					</view>
					<u-icon :name="(total - showList.length) ? 'expand' : 'collapse'" custom-prefix="u" size="9"
						color="#ACACAE"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		commentCommentPage
	} from '@/api/user/comment.js'
	import {
		actionAction,
		actionDelAction
	} from '@/api/action.js'
	export default {
		props: {
			item: {
				default: () => ({})
			},
			userId: {
				default: ''
			},
			isShop: {
				default: false
			}
		},
		data() {
			// 初始化回复数组
			return {


				expand: false,

				total: 0,
				list: [], // 回复列表
				queryObj: {
					pageNumber: 1,
					pageSize: 10
				}
			}
		},
		computed: {
			showList() {
				// 如果当前未展开完毕，则使用当前
				let len = !this.expand ? this.list.length : 3
				return this.list.slice(0, len)
			}
		},
		watch: {
			item: {
				handler(v) {
					let {
						list,
						totalRow
					} = v.childPage || {}
					this.list = list || []
					this.total = totalRow || 0
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 格式化日期
			formatDate(date) {
				date = dayjs(date.createTime || dayjs())
				// 判断是否是当年发布
				let formatSign = (date.format('YYYY') === dayjs().format('YYYY') ? '' : 'YYYY-') + 'MM-DD'
				return date.format(formatSign)
			},
			replyAction(data = {}) {
				if (this.isShop) return
				this.$emit('change', data)
			},
			likeAction(item) {
				if (this.isShop) return
				this.actionAction(8, item).then(() => {
					this.$emit('update')
				})
			},
			// 展开回复
			expandAction() {
				if (this.total !== this.list.length) {
					this.getList()
				} else {
					this.expand = !this.expand
				}
			},
			// 获取回复列表
			getList(refresh = false) {
				// 拦截空对象
				if (!this.item.commentId) return
				let {
					pageNumber,
					pageSize
				} = this.queryObj || {}
				commentCommentPage({
					pageNumber,
					pageSize,
					parentId: this.item.commentId
				}).then(result => {
					if (pageNumber === 1) {
						this.list = []
					}
					this.total = result.totalRow
					this.list = [...this.list, ...result.list]
					if (this.list.length >= (pageNumber * pageSize) && this.list.length < this.total) {
						this.queryObj.pageNumber++
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.color-grew-light {
		color: #757575
	}

	.author-tag {
		width: 66rpx;
		height: 30rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
		border-radius: 8rpx;
	}
</style>
